<template>
	<view>
		<!-- 模拟的标题 -->
		<!-- <image class="header" src="https://www.mescroll.com/img/meitun/header.jpg" mode="aspectFit"/> -->
		<fui-search-bar background="#ededed" radius="36" searchColor="#FFB703"></fui-search-bar>
		
		<mescroll-body-diy @init="mescrollInit" top="0" bottom="0" @down="downCallback" @up="upCallback" :bottombar="false">
			<!-- Banner区域 -->
			<fui-swiper-dot type="3" field="title" :styles="styles" :items="banners" :current="current" class="fui-rect">
				<swiper class="fui-banner__wrap" @change="change" circular :indicator-dots="false" autoplay
					:interval="4500" :duration="150">
					<swiper-item v-for="(item,index) in banners" :key="index" @click="onSwiperItemClicked(index)">
						<view class="fui-banner__item" :style="{background:item.background}">
							<image :src="item.image" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
				<!--查找骨架节点 fui-rect、fui-round-->
				<fui-skeleton @change="skChange" v-if="show" background="#F1F4FA" outerClass="fui-wrap"></fui-skeleton>
			</fui-swiper-dot>
			<!-- 分类导航区 -->
			<fui-white-space size="small"></fui-white-space>
			<fui-grid :columns="5" style="margin-bottom: 10rpx;" class="fui-rect">
				<fui-grid-item  v-for="(item,index) in categories" :key="index" backgroundColor="white" >
					<view class="fui-grid__cell fui-rect">
						<image :src="item.icon?item.icon:'/static/images/common/icon_tabbar_2x.png'" class="fui-icon__2x" mode="widthFix">
						</image>
						<text>{{item.name}}</text>
					</view>
					<!--查找骨架节点 fui-rect、fui-round-->
					<fui-skeleton @change="skChange" v-if="show" background="#F1F4FA" outerClass="fui-wrap"></fui-skeleton>
				</fui-grid-item>
			</fui-grid>
			<fui-white-space size="small"></fui-white-space>
			<fui-notice-bar :content="content" :speed="40" scrollable>
				<view class="fui-icon__box fui-padding">
					<fui-icon name="notice" :size="36" color="#FF2B2B"></fui-icon>
				</view>
			</fui-notice-bar>
			<fui-white-space size="small"></fui-white-space>
			<!-- 模拟的内容 -->
			<!-- <image src="https://www.mescroll.com/img/meitun/meitun1.jpg" mode="widthFix"/> -->
			<!-- <image src="https://www.mescroll.com/img/meitun/meitun2.jpg" mode="widthFix"/> -->
			<!-- 分页的数据列表 -->
			<good-list :list="goods"></good-list>
		</mescroll-body-diy>
		
		<!-- 模拟的底部 -->
		<!-- <image class="footer" src="https://www.mescroll.com/img/meitun/footer.jpg" mode="aspectFit"/> -->
	</view>
</template>

<script>
	import MescrollBodyDiy from "@/uni_modules/mescroll-uni/components/mescroll-diy/meitun/mescroll-body.vue";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import GoodList from "@/components/good-list/good-list.vue";
	import {apiGoods} from "@/api/mock.js"
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MescrollBodyDiy, // 避免与main.js注册的全局组件名称相同,否则注册组件失效(iOS真机 APP HBuilderX2.7.9)
			GoodList
		},
		data() {
			return {
				goods: [], // 数据列表
				content: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
				current: 0,
				categories:[],
				banners: [{
					title:'应用模板'
				}],
				styles: {
					height: 80,
					bottom: 0
				},
				show: true
			}
		},
		onReady() {
			// 获取首页横幅信息
			this.http.get('/v1/banners',{brief:true}).then(res => {
				console.log(res);
				this.banners = res.data
			}).catch(e => {
				
			})
			// 获取信息分类
			this.http.get('/v1/information/categories',{brief:true}).then(res => {
				this.categories = res.data;
			}).catch(e => {
				
			})
			setTimeout(() => {
				this.show = false
			}, 5000)
		},
		methods: {
			/*改变图标*/
			change(e) {
				this.current = e.detail.current;
			},
			/*滑块被点击 */
			onSwiperItemClicked(index) {
				// console.log(this.banners[index]);
				let banner = this.banners[index];
				console.log(banner.bannerable_type);
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				apiGoods(page.num, page.size).then(res=>{
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					this.mescroll.endSuccess(res.list.length);

					//设置列表数据
					if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表
					this.goods=this.goods.concat(res.list); //追加新数据
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			/* 事件在查找节点完成后触发并返回所有节点数据。*/ 
			skChange() {
				
			}
		}
	}
</script>

<style>
	image{width: 100%;vertical-align: bottom;height:auto}
	.header{z-index: 9900;position: fixed;top: --window-top;left: 0;height: 180upx;background: white;}
	/* .footer{z-index: 9900;position: fixed;bottom: 0;left: 0;height: 100upx;background: white;} */
	.fui-banner__item {
		width: 100%;
		height: 360rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 600;
	}
	
	.fui-banner__wrap {
		height: 360rpx;
	}
	
	.fui-grid__cell {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex: 1;
		font-size: 28rpx;
		font-weight: 400;
		/* background-color: white; */
	}
	
	.fui-icon {
		width: 96rpx;
		height: 96rpx;
		margin-bottom: 10rpx;
	}
	
	.fui-icon__2x {
		width: 72rpx;
		height: 72rpx;
		margin-bottom: 10rpx;
	}
	
	.fui-flex__column {
		flex: 1;
	}
	
	.fui-icon__box {
		padding-left: 24rpx;
		padding-right: 12rpx;
	}
</style>
